<template>
  <div class="entityInfo" v-show="isShow">
    <div class="entityInfo_head">
      <div class="entityInfo_head_title">详细信息</div>
      <div class="entityInfo_head_close" @click="setClose">
        <i class="el-icon-close"></i>
      </div>
    </div>
    <div class="entityInfo_title">{{tableData.name}}</div>
    <div class="entityInfo_table">
      <div class="entityInfo_table_left">
        <div class="entityInfo_table_item" v-for="(item,index) in keysData" :key="index">{{item}}</div>
      </div>
      <div class="entityInfo_table_right">
        <div class="entityInfo_table_item" v-for="(item,index) in valuesData" :key="index">{{item}}</div>
      </div>
      <!-- <div class="entityInfo_table_item" v-for="(item,index) in keysData" :key="index">{{item}}</div> -->
    </div>
  </div>
</template>
<script>
import { getEntityInfo } from '@/api/public'
export default {
  name: 'EntityInfo',
  data() {
    return {
      tableData: {},
      keysData: [],
      valuesData: [],
      isShow: false,
      neoid: ''
    }
  },
  methods: {
    // 获取前一个界面传来的数据
    get(query) {
      this.neoid = query
      if (query) {
        this.getEntity()
      }
      // console.log(this.neoid)
    },
    getEntity() {
      getEntityInfo({ neoid: this.neoid }).then((res) => {
        // console.log(typeof res)
        if (typeof res === 'object') {
          this.tableData = res
          this.isShow = true
          // console.log(this.tableData.neoId)
          this.$delete(this.tableData, 'neoId')
          // console.log(Object.values(res))
          this.keysData = Object.keys(res)
          this.valuesData = Object.values(res)
          // this.listData.push({

          // })
        } else {
          this.tableData = {}
        }
      })
    },
    // 当关闭图表的时候清除推荐列表的数据，并恢复默认数据值
    clear() {
      this.isShow = false
      this.tableData = {}
    },
    // 关闭属性浮窗
    setClose() {
      this.isShow = false
    },
    show() {
      this.isShow = true
    }
  }
}
</script>
<style lang="scss" scoped>
.entityInfo{
  position: absolute;
  z-index: 999;
  width: 30%;
  height: 40%;
  border: 1px solid #ccc;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  background-color: #fff;
  top: 0;
  right: 35%;
  overflow: auto;
  &_head{
    /* text-align: center; */
    display: grid;
    grid-template-columns: 98% 2%;
    padding: 10px 20px;
    border-bottom: 3px solid #ccc;
    &_title{
      font-size: 20px;
    }
    &_close{
      font-size: 20px;
      cursor: pointer;
    }
  }
  &_title{
    padding: 20px 0;
    text-align: center;
    font-size: 25px;
    font-weight: 700;
  }
  &_table{
    display: flex;
    // grid-template-columns: auto auto;
    // grid-template-rows: repeat(5,43%);
    text-align: center;
    &_left{
      width: 50%;
      height: 100%;
    }
    &_right{
      width: 50%;
      height: 100%;
    }
    &_item{
      height: 50px;
      display: grid;
      align-content: center;
      // width: 50%;
      border-top: 1px solid #ccc;
      // display: grid;
      // align-content: center;
    }
  }
}
</style>
